<template>
  <div class="menu-container">
    <h1>菜单管理</h1>
    <div class="table-container">
      <table class="menu-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>菜单名称</th>
            <th>路径</th>
            <th>图标</th>
            <th>权限</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="menu in menus" :key="menu.id">
            <td>{{ menu.id }}</td>
            <td>{{ menu.name }}</td>
            <td>{{ menu.path }}</td>
            <td><i :class="menu.icon"></i> {{ menu.icon }}</td>
            <td>{{ menu.permission }}</td>
            <td><span :class="menu.status === 'active' ? 'status-active' : 'status-inactive'">{{ menu.status }}</span></td>
            <td>
              <button class="btn-edit">编辑</button>
              <button class="btn-delete">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Menu {
  id: number;
  name: string;
  path: string;
  icon: string;
  permission: string;
  status: 'active' | 'inactive';
}

const menus = ref<Menu[]>([
  { id: 1, name: '用户管理', path: '/users', icon: 'user', permission: 'user:manage', status: 'active' },
  { id: 2, name: '角色管理', path: '/roles', icon: 'role', permission: 'role:manage', status: 'active' },
  { id: 3, name: '菜单管理', path: '/menus', icon: 'menu', permission: 'menu:manage', status: 'active' },
  { id: 4, name: '系统设置', path: '/settings', icon: 'settings', permission: 'system:manage', status: 'inactive' }
]);
</script>

<style scoped>
.menu-container {
  padding: 20px;
}

.table-container {
  margin-top: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
}

.menu-table {
  width: 100%;
  border-collapse: collapse;
}

.menu-table th,
.menu-table td {
  padding: 12px 15px;
  text-align: left;
}

.menu-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.menu-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.status-active {
  color: #4CAF50;
  background-color: #e8f5e9;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-inactive {
  color: #f44336;
  background-color: #ffebee;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.btn-edit,
.btn-delete {
  padding: 6px 12px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit {
  background-color: #2196F3;
  color: white;
}

.btn-delete {
  background-color: #f44336;
  color: white;
}
</style>